<template>
  <div class="post-list">
      <article v-for="post in list" :key="post._id" class="card mb-5 shadow-sm">
      <div class="card-body">
          <router-link :to="`/post/${post._id}`">
          <div class="row my-3 align-items-center">
              <div class="col-4">
                  <img :src="post.image?.url" class="rounded-lg w-100" alt="">
              </div>
              <div :class="{ 'col-8': post.image }">{{ post.excerpt }}</div>
          </div>
          <span>{{ post.createdAt }}</span>
           </router-link>
      </div>
 
      </article>
  </div>
</template>

<script  lang="ts">
import { PropType, defineComponent } from 'vue'
//  import { PostProps } from '@/testData'
import { PostProps } from '../store'

export default defineComponent({
  props:{
      list:{
          type:Array as PropType<PostProps[]>,
          required: true
      }
  },
  setup() {
      return {}
  }
})
</script>

<style scoped>

</style>